import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import {
  makeStyles,
  Button,
  Divider,
  Tooltip,
} from '@fluentui/react-components';
import {
  Home20Regular,
  Home20Filled,
  ContactCard20Regular,
  ContactCard20Filled,
  DocumentBulletList20Regular,
  DocumentBulletList20Filled,
  ChartMultiple20Regular,
  ChartMultiple20Filled,
  Shield20Regular,
  Shield20Filled,
  DataUsage20Regular,
  DataUsage20Filled,
  Settings20Regular,
  Settings20Filled,
  Building20Regular,
} from '@fluentui/react-icons';

const useStyles = makeStyles({
  sidebar: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#FFFFFF',
    borderRight: '1px solid #E5E6EB',
  },
  header: {
    padding: '20px 24px',
    borderBottom: '1px solid #E5E6EB',
  },
  headerCollapsed: {
    padding: '20px 12px',
    textAlign: 'center',
  },
  logo: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    fontSize: '18px',
    fontWeight: '600',
    color: '#165DFF',
  },
  logoCollapsed: {
    justifyContent: 'center',
  },
  logoIcon: {
    fontSize: '24px',
  },
  logoText: {
    fontSize: '18px',
    fontWeight: '600',
  },
  navigation: {
    flex: 1,
    padding: '16px 0',
    overflow: 'auto',
  },
  navSection: {
    marginBottom: '24px',
  },
  navSectionTitle: {
    padding: '0 24px 8px',
    fontSize: '12px',
    fontWeight: '600',
    color: '#86909C',
    textTransform: 'uppercase',
    letterSpacing: '0.5px',
  },
  navSectionTitleCollapsed: {
    display: 'none',
  },
  navItem: {
    width: '100%',
    marginBottom: '4px',
    justifyContent: 'flex-start',
    borderRadius: '0',
    padding: '12px 24px',
    height: 'auto',
    minHeight: '44px',
    gap: '12px',
  },
  navItemCollapsed: {
    padding: '12px',
    justifyContent: 'center',
  },
  navItemActive: {
    backgroundColor: '#F0F4FF',
    color: '#165DFF',
    borderRight: '3px solid #165DFF',
  },
  navItemText: {
    fontSize: '14px',
    fontWeight: '500',
  },
  navItemTextCollapsed: {
    display: 'none',
  },
  footer: {
    padding: '16px 24px',
    borderTop: '1px solid #E5E6EB',
  },
  footerCollapsed: {
    padding: '16px 12px',
  },
});

interface SidebarProps {
  collapsed: boolean;
  onToggle: () => void;
  mobileOpen: boolean;
  onMobileToggle: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ collapsed, onToggle, mobileOpen, onMobileToggle }) => {
  const classes = useStyles();
  const location = useLocation();
  const navigate = useNavigate();

  const navigationItems = [
    {
      section: '主要功能',
      items: [
        {
          path: '/dashboard',
          label: '仪表盘',
          icon: Home20Regular,
          iconFilled: Home20Filled,
        },
        {
          path: '/opportunities',
          label: '商机管理',
          icon: ContactCard20Regular,
          iconFilled: ContactCard20Filled,
        },
        {
          path: '/business-plans',
          label: '商务计划',
          icon: DocumentBulletList20Regular,
          iconFilled: DocumentBulletList20Filled,
        },
        {
          path: '/progress-tracking',
          label: '进展跟踪',
          icon: ChartMultiple20Regular,
          iconFilled: ChartMultiple20Filled,
        },
      ],
    },
    {
      section: '管理分析',
      items: [
        {
          path: '/risk-management',
          label: '风险管理',
          icon: Shield20Regular,
          iconFilled: Shield20Filled,
        },
        {
          path: '/analytics',
          label: '数据分析',
          icon: DataUsage20Regular,
          iconFilled: DataUsage20Filled,
        },
      ],
    },
    {
      section: '系统',
      items: [
        {
          path: '/settings',
          label: '系统设置',
          icon: Settings20Regular,
          iconFilled: Settings20Filled,
        },
      ],
    },
  ];

  const isActive = (path: string) => {
    return location.pathname === path || location.pathname.startsWith(path + '/');
  };

  const handleNavClick = (path: string) => {
    navigate(path);
    if (mobileOpen) {
      onMobileToggle();
    }
  };

  return (
    <div className={classes.sidebar}>
      {/* 头部 Logo */}
      <div className={collapsed ? classes.headerCollapsed : classes.header}>
        <div className={`${classes.logo} ${collapsed ? classes.logoCollapsed : ''}`}>
          <Building20Regular className={classes.logoIcon} />
          {!collapsed && <span className={classes.logoText}>商机跟踪系统</span>}
        </div>
      </div>

      {/* 导航菜单 */}
      <div className={classes.navigation}>
        {navigationItems.map((section) => (
          <div key={section.section} className={classes.navSection}>
            {!collapsed && (
              <div className={classes.navSectionTitle}>
                {section.section}
              </div>
            )}
            {section.items.map((item) => {
              const active = isActive(item.path);
              const Icon = active ? item.iconFilled : item.icon;
              
              return (
                <Tooltip
                  key={item.path}
                  content={collapsed ? item.label : ''}
                  relationship="label"
                  positioning="after"
                >
                  <Button
                    appearance="subtle"
                    icon={<Icon />}
                    onClick={() => handleNavClick(item.path)}
                    className={`
                      ${classes.navItem} 
                      ${collapsed ? classes.navItemCollapsed : ''} 
                      ${active ? classes.navItemActive : ''}
                    `}
                  >
                    {!collapsed && (
                      <span className={classes.navItemText}>
                        {item.label}
                      </span>
                    )}
                  </Button>
                </Tooltip>
              );
            })}
          </div>
        ))}
      </div>

      {/* 底部信息 */}
      <div className={collapsed ? classes.footerCollapsed : classes.footer}>
        {!collapsed && (
          <>
            <Divider />
            <div style={{ 
              textAlign: 'center', 
              fontSize: '12px', 
              color: '#86909C', 
              marginTop: '12px' 
            }}>
              版本 1.0.0
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Sidebar;
